參考資料：
Alex老師的教學
PJCHENder筆記
JS30-Day15-LocalStorage

toDoList

先抓節點

const addItems = document.querySelector('.add-items'); //form
const itemsList = document.querySelector('.plates'); // ul
const items = JSON.parse(localStorage.getItem('items')) || [];
// 取出localStorage的資料並由字串轉為物件
// items是localStorage內的資料夾名稱
// 這樣寫也可以
// items = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];

作出畫面

let createList = (data = [], dom) => {
    // 針對容器做資料處理
    dom.innerHTML = data
        .map((item, index) => {
            //  <input type="checkbox" data-index="1" id="item1" checked} />
            return `
        <li>
            <input type="checkbox" data-index="${index}" id="item${index}" ${item.done ? 'checked' : ''} />
            <label for="item${index}">${item.text}</label>
        </li>
        `;
        })
        .join('');//字串化
};

createList(items, itemsList);
// (localStorage資料, ul位置)

輸入內容

let addItem = e => {
    e.preventDefault(); //擋住form表單的內建動作，否則會跳到action的連結
    let input = e.target.querySelector('[name=item]'); //輸入框
    // e.target 可以換成 this ，但this不建議用箭頭函式
    // 此處可以用this.querySelector('input:first-child')
    // name改的機率不高，建議用name

    let obj = { text: input.value, done: false }; //傳入的物件樣式
    items.push(obj); // 更新JS資料
    //和上方合併成items.push({ text, done: false });也OK

    localStorage.setItem('items', JSON.stringify(items)); // 更新localStorage資料

    e.target.reset(); //清空輸入框
    // 可以用this.reset();
    // reset()針對form表單

    createList(items, itemsList); //更新畫面
};
addItems.addEventListener('submit', addItem); //加入內容的按鈕
// 題目提供的節點是form表單，不是裡面的按鈕

紀錄li前方圖示的切換

let toggleItem = e => {
    //  console.log(e.currentTarget, e.target);
    if (!e.target.matches('input')) {
        //阻擋不是input的內容，避免重複觸發
        return;
    }
    let index = e.target.dataset.index;
    items[index].done = !items[index].done;//更新JS資料
    // 點擊時true變成false，反之亦然
    localStorage.setItem('items', JSON.stringify(items)); // 更新localStorage資料
    createList(items, itemsList); //更新畫面
};;
itemsList.addEventListener('click', toggleItem); //整個ul

預設的CSS有個很有趣的地方，點擊時會切換圖案，而且此圖案直接寫在CSS內。

.plates input + label:before {
  content: "⬜️";
  margin-right: 10px;
}

.plates input:checked + label:before {
  content: "?";
}

想要換圖案可以去EMOJIALL找找看是否有喜歡的

連結